<template>
  <div class="relative w-full h-full pb60 overflow-y-auto">
    <div class="border-bottom mb12">
      <PageHeader :title="t('fundMana.detail.结算详情')">
        <template #right>
          <el-button type="primary" @click="goBack" size="small">
            <SvgIcon name="iconfanhui" color="#fff" class="mr4" />{{ t('fundMana.detail.返回上级页面') }}
          </el-button>
        </template>
      </PageHeader>
      <Step :detail="detail" />
      <!-- <div class="flex_aic_jcc mt36" v-if="detail.status === 1">
        <el-button @click="dialogVisible = true">{{ t('common.驳回') }}</el-button>
        <el-button type="primary" @click="handleAudit">{{ t('common.审核通过') }}</el-button>
      </div>
      <div class="flex_aic_jcc mt36" v-if="detail.status === 2">
        <el-button type="primary" @click="showPayoutDialog = true"
          >{{ t('fundMana.detail.确认打款') }}</el-button
        >
      </div> -->
      <div class="lht-32 pl14">{{ t('fundMana.detail.结算信息') }}</div>
      <div class="infoRow flex_aic">
        <img
          class="ml15 mr15"
          src="@/assets/images/settlementBill/icon.png"
          alt=""
        />
        <span class="color-ff2b4e mr4">{{ t('fundMana.detail.结算金额') }}￥{{ detail.commissionIncomeTotal }} = </span>
        >{{ t('fundMana.detail.实付订单金额') }}￥{{ detail.payReal }} - {{ t('fundMana.detail.退款金额') }}￥{{
          detail.refundReal ?? 0
        }}- {{ t('fundMana.detail.平台佣金') }}￥{{ detail.commissionTotal ?? 0 }} + {{ t('fundMana.detail.积分抵扣金额') }}￥{{
          detail.payDiscountPoint ?? 0
        }}
      </div>
      <div class="lht-32 pl14 border-bottom pb10">{{ t('fundMana.detail.结算信息') }}</div>
      <el-table
        :show-header="false"
        :data="tableData"
        style="width: 100%"
        :cell-class-name="cellClassName"
        border
        :span-method="arraySpanMethod"
      >
        <el-table-column prop="label1" />
        <el-table-column prop="value1" />
        <el-table-column prop="label2" />
        <el-table-column prop="value2" />
      </el-table>
      <div class="lht-32 pl14 mt12">{{ t('fundMana.detail.结算订单信息') }}</div>
      <el-table
        :data="tableData2"
        style="width: 100%"
        border
        class="cover-table"
      >
        <el-table-column :label="t('common.序号')" type="index" width="80" />
        <el-table-column :label="t('fundMana.detail.订单号')" prop="saleNo" />
        <el-table-column :label="t('fundMana.detail.订单实付金额')" prop="payReal" />
        <el-table-column :label="t('fundMana.detail.退单金额')" prop="refundReal" />
        <el-table-column :label="t('fundMana.detail.佣金')" prop="commissionTotal" />
        <!-- <el-table-column :label="t('fundMana.detail.退还佣金')" prop="refundCommission" /> -->
<!--        <el-table-column :label="t('fundMana.detail.优惠券抵扣金额')" prop="payDiscountCoupon" />-->
        <el-table-column :label="t('fundMana.detail.积分抵扣金额')" prop="payDiscountPoint" />
<!--        <el-table-column :label="t('fundMana.detail.邮费')" prop="payTotalPostage" />-->
        <el-table-column :label="t('fundMana.detail.下单日期')" prop="saleCreatedTime">
          <template #default="scope">
            {{moment(scope.row.saleCreatedTime).format("YYYY-MM-DD HH:mm:ss")}}
          </template>
        </el-table-column>
        <el-table-column :label="t('fundMana.detail.付款日期')" prop="signTime">
          <template #default="scope">
            {{moment(scope.row.signTime).format("YYYY-MM-DD HH:mm:ss")}}
          </template>
        </el-table-column>
        <el-table-column :label="t('fundMana.detail.操作')">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              @click="handleOrderDetail(scope.row)"
              >{{ t('fundMana.detail.查看') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="flex_aic_jcc mt12">
        <el-pagination
          v-model:current-page="pageInfo.page"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <div class="lht-32 pl14 mt12" v-if="detail.status == -1">
        {{ t('fundMana.detail.驳回原因') }}：{{ detail.rejectReason }}
      </div>

      <template v-if="detail.status == 3">
        <div class="lht-32 pl14 mt12">{{ t('fundMana.detail.打款信息') }}</div>
        <!-- <div class="lht-32 pl14 mt12">
          {{ t('fundMana.detail.打款凭证') }}：
          <img :src="detail.payoutImage" alt="" />
        </div> -->
        <div class="custom-table">
          <div class="custom-table-row">
            <div class="custom-table-label w-160">{{ t('fundMana.detail.打款备注') }}</div>
            <div class="pb0 custom-table-value">
              {{ detail.payoutRemark || "--" }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160">{{ t('fundMana.detail.打款凭证') }}</div>
            <div class="pb0 custom-table-value">
              <div class="flex_aic gap-12 flex-wrap" v-if="detail.payoutImage">
                <el-image
                  v-for="(img, index) in detail.payoutImage.split(',')"
                  :key="index"
                  :src="img"
                  style="
                    width: 100px;
                    height: 100px;
                    margin-right: 5px;
                    margin-bottom: 5px;
                  "
                  fit="cover"
                  :previewSrcList="[img]"
                />
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Step from "./components/step.vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import moment from "moment";
import Dialog from "@/components/dialog.vue";
import { ElMessage } from "element-plus";
import UploadFile from "@/components/UploadFile.vue";

const { locale, t } = useI18n();
const router = useRouter();
const route = useRoute();
const detail = ref({});
const rejectReason = ref("");
const dialogVisible = ref(false);
const payoutParams = ref({
  remark: "",
  image: [],
});
const showPayoutDialog = ref(false);
const step1 = ref([
  {
    label: "生成结算单",
    time: "2025-03-18 10:00:00",
    icon: new URL(
      `@/assets/images/settlementBill/step1-hot.png`,
      import.meta.url
    ).href,
  },
  {
    label: "店铺确认",
    time: "2025-03-18 10:00:00",
    icon: new URL(`@/assets/images/settlementBill/step2.png`, import.meta.url)
      .href,
  },
  {
    label: "平台审核",
    time: "2025-03-18 10:00:00",
    icon: new URL(`@/assets/images/settlementBill/step3.png`, import.meta.url)
      .href,
  },
  {
    label: "结算完成",
    time: "2025-03-18 10:00:00",
    icon: new URL(`@/assets/images/settlementBill/step4.png`, import.meta.url)
      .href,
  },
]);
const tableData = ref([
  {
    label1: "结算单号",
    value1: "",
    label2: "结算起止时间",
    value2: "",
  },
  // {
  //   label1: "店铺名称",
  //   value1: "",
  //   label2: "店铺联系人",
  //   value2: "",
  // },
  // {
  //   label1: "店铺联系电话",
  //   value1: "",
  // },
]);
const tableData2 = ref([]);
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0,
});
defineOptions({
  name: "SettlementBillDetail",
});

const goBack = () => {
  router.back();
};
const cellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex % 2 === 0) {
    return "warning-column winth-20";
  } else {
    return "winth-30";
  }
};
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (
    (columnIndex === 2 && rowIndex === 2) ||
    (columnIndex === 3 && rowIndex === 2)
  ) {
    return [0, 0];
  } else if (columnIndex === 1 && rowIndex === 2) {
    return [1, 3];
  } else {
    return [1, 1];
  }
};

const getDetail = () => {
  Api.tenantSettlementDetail(route.query.id).then((res) => {
    detail.value = res.data || {};
    tableData.value[0].value1 = detail.value.billCode;
    tableData.value[0].value2 =
      moment(detail.value.startTime).format("YYYY-MM-DD HH:mm:ss") +
      " ~ " +
      moment(detail.value.endTime).format("YYYY-MM-DD HH:mm:ss");
    tableData.value[1].value1 = detail.value["tenantName" + locale.value];
    tableData.value[1].value2 = detail.value.tenantContact;
    tableData.value[2].value1 = detail.value.tenantPhone;
    // tableData.value[2].value2 = detail.value.tenantEmail;
  });
};

const getOrderList = () => {
  Api.tenantSettlementDetailList({
    id: route.query.id,
    page: pageInfo.value.page - 1,
    size: pageInfo.value.pageSize,
  }).then((res) => {
    tableData2.value = res.data.content || [];
    pageInfo.value.total = Number(res.data.totalElement || 0);
  });
};

const handleSizeChange = (size) => {
  pageInfo.value.page = 1;
  pageInfo.value.pageSize = size;
  getOrderList();
};
const handleCurrentChange = (page) => {
  pageInfo.value.page = page;
  getOrderList();
};
onMounted(() => {
  getDetail();
  getOrderList();
});

const handleOrderDetail = (row) => {
  router.push({
    path: "/order/order_lists/detail",
    query: {
      id: row.saleId,
    },
  });
};
</script>

<style lang="scss" scoped>
.mt50 {
  margin-top: 50px;
}

.step {
  .step-item {
    &-icon {
      img {
        width: 75px;
        height: 75px;
      }
    }
    &-label {
      //   color: rgb(153, 153, 153);
      line-height: 22px;
    }
    &-time {
      //   color: rgba(24, 144, 255, 0.5);
      line-height: 22px;
    }

    .left_line,
    .right_line {
      width: 50px;
      height: 1px;
      background-color: rgba(255, 109, 31, 0.3);
      margin-top: 37.5px;
    }
  }
}

.infoRow {
  height: 60px;
  margin: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 8px #9999990d, 0 0 8px #9999990d;
  font-size: 16px;
  img {
    width: 36px;
    height: 36px;
  }
}

.border-bottom {
  height: 40px;
  border-bottom: 1px solid #d9d9d9;
}

:deep(.warning-column) {
  background-color: #f8f9fa;
}
:deep(.winth-20) {
  width: 20%;
}
:deep(.winth-30) {
  width: 30%;
}
.w-380 {
  width: 380px;
}
</style>
